<template>
	<div class='tabbar'>
		1111
	  <div  class='tabbar-item' v-for='(item,index) of tabbarList' :key='index' @click='handleItemTap(item,index)'>
	    <div class='tabbar-item-icon'>
			<img :src="activeIdx === index ? item.selectedIconPath : item.iconPath" mode="widthFix"/>
	    </div>
		<div :class="{'tabbar-item-text':true,'active':activeIdx === index}">{{item.text}}</div>
	  </div>
	</div>
</template>

<script>
	import tabbarList from "./tabBarRouter.js";
	export default{
		data(){
			return{
				activeIdx:0,
				tabbarList
			}
		},

		methods:{
			initIndex(){
				//初始化选择状态
				let index=getApp().globalData.navBarIndex
				if(!isNaN(index)){
					this.activeIdx=index
					wx.switchTab({
						url:`/${this.tabbarList[index].pagePath}`
					})
				}
			},
			handleItemTap(item,index){
				if(index==1){
					//选择相机
					this.handlePai();
					return
				}
				wx.switchTab({
					url:`/${item.pagePath}`
				})
			},
			async handlePai(){
				let data=await this.$currency.upLoadImage();
				let res=JSON.parse(data.data);
				let id=null;
				if(res.level=='success'){
					id=res.data.id
				}
				wx.showLoading({
					title:'识别图片中',
					mask:true
				})
				try{
					let checkResult=await this.$api.getInfoByImg({img_id:id});//识别图片跳转
					wx.showToast({
						title:checkResult.data.message,
						icon:'none',
						complete() {
							if(checkResult.data.level=='success'){
								// setTimeout(()=>{
								// 	wx.navigateTo({
								// 		url:checkResult.data.data.page_url
								// 	})
								// },2000)
							}
						}
					})
				}catch(e){
					//TODO handle the exception
					wx.showToast({
						title:'请求超时',
						icon:'none'
					})({
						title:'识别图片中'
					})
				}
				
				
			}
		},
		mounted() {
			this.initIndex()
		}
	}
</script>

<style scoped>
	.tabbar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100rpx;
	  border-top: 0.5px solid #d5d5d5;
	  display: flex;
	  font-size: 0;
	  background: #fff;
	}
	.tabbar-item {
	  flex: 1;
	  text-align: center;
	  overflow: hidden;
	  box-sizing: border-box;
	  padding: 8rpx 10rpx 0;
	  color: #333333;
	}
	
	.tabbar-item:nth-child(2){
	  position: relative;
	  bottom: 50rpx;
	  height:150rpx;
	  flex: 0.7;
	}
	
	.tabbar-item:nth-child(2) .tabbar-item-icon{
	  height: 100rpx;
	  background: #fff;
	  border-radius: 50%;
	  /* border-top: solid 1px gray; */
	}
	
	.tabbar-item:nth-child(2) .tabbar-item-icon image{
	  width: 80rpx;
	  height: 80rpx;
	  padding-top: 6rpx;
	}
	
	.tabbar-item:nth-child(2) .tabbar-item-text{
	  line-height: 0;
	  font-size: 24rpx;
	  margin-top: 8px;
	  color: #808080;
	}
	
	.tabbar-item-icon {
	  margin-bottom: 6rpx;
	  height: 56rpx;
	}
	
	.tabbar-item-icon image {
	  width: 56rpx;
	  height: 56rpx;
	}
	
	.tabbar-item-text {
	  font-size: 24rpx;
	  line-height: 20rpx;
	  color: #808080;
	}
	.active {
	  color: #0180CF
	}
</style>
